/* ==================================================
 * 由 Transition.scss 统一管理全局Transition, Animation
 * ================================================== */

// Page Turn on Transian Effect
.turn-on {
    &-enter {
      transform: translate3d(100%, 0, 0);
    }
    &-leave-to {
      transform: translate3d(0%, 0, 0);
    }
    &-enter-active, &-leave-active  {
      transition: transform .4s ease;
    }
  }

  // Page Turn Off Transian Effect
  .turn-off {
    &-enter {
      transform: translate3d(-100%, 0, 0);
    }
    &-leave-to {
      transform: translate3d(0%, 0, 0);
    }
    &-leave-active {
      z-index: 2;
    }
    &-enter-active, &-leave-active  {
      transition: transform .4s ease;
    }
  }

  // song list
  .list-view-enter-active, .list-view-leave-active {
    transition: transform .5s ease;
  }
  .list-view-enter, .list-view-leave-to{
    transform: translateY(100%);
  }

  // header title switch animation
  .title-enter-active, .title-leave-active {
    transition-property: opacity, transform;
    transition-duration: .5s;
  }
  .title-enter, .title-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }

  // Song Ablum Infinite Rotate
  .spin-slow {
    animation: spin 6s linear infinite;
  }
  .spin {
    animation: spin 30s linear infinite;
  }

  @keyframes spin{
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
